<template>
  <el-card class="access" shadow="hover">
    <!-- <template #header>
      <vab-icon icon="line-chart-line" />
      收益趋势
      <el-tag class="card-header-tag" type="success">日</el-tag>
    </template> -->
    <vab-chart
      class="pie"
      :init-options="initOptions"
      :options="options"
      theme="vab-echarts-theme"
    />
    <div class="bottom">
      <span>
        新用户增长趋势:

        <vab-count
          :decimals="countConfig.decimals"
          :duration="countConfig.duration"
          :end-val="countConfig.endVal"
          :prefix="countConfig.prefix"
          :separator="countConfig.separator"
          :start-val="countConfig.startVal"
          :suffix="countConfig.suffix"
        />
      </span>
    </div>
  </el-card>
</template>

<script>
  import VabChart from '@/extra/VabChart'
  import VabCount from '@/extra/VabCount'
  import _ from 'lodash'

  export default {
    components: {
      VabChart,
      VabCount,
    },
    data() {
      return {
        timer: null,
        countConfig: {
          startVal: 0,
          endVal: _.random(0, 1),
          decimals: 0,
          prefix: '',
          suffix: '',
          separator: ',',
          // duration: 8000,
        },
        initOptions: {
          renderer: 'svg',
        },
        options: {
          tooltip: {
            trigger: 'axis',
            extraCssText: 'z-index:1',
          },
          grid: {
            top: '5%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 75.65, name: 'android系统' },
                { value: 24.35, name: 'ios系统' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        },
      }
    },
  }
</script>
<style scoped>
  .pie {
    width: 200px;
    height: 200px;
  }
</style>
